<template>
    <div class="login-box">
      <div class="logo">
        欢迎<span>U2</span>后台
      </div>

      <div class="form-box">
        <el-input v-model="adminUsername" 
          placeholder="请输入账号"
          class="all-input">
        </el-input>
        <el-input v-model="adminPassword" 
          placeholder="请输入密码"
          class="all-input">
        </el-input>

        <div class="check-box">
          <el-checkbox>记住我</el-checkbox>
        </div>

        <el-button class="login-btn" @click="sendRequest">登录</el-button>
      </div>
    </div>
</template>
 
<script>
export default {
  name: 'login-box',
  data() {
      return {
        adminUsername: '',
        adminPassword: ''
      }
  },
  methods: {
    sendRequest() {
      this.$http({
        url: '/sysAdmin/login',
        method: 'POST',
        data: {
          adminUsername: this.adminUsername,
          adminPassword: this.adminPassword
        },
      }).then(res => {
        if ( res.data.code == 200 ) {
          this.$cookies.set("token", res.data.result.token)
          localStorage.setItem( "admin", JSON.stringify(res.data.result.sysAdmin) )

          // 页面跳转
          let routeUrl = this.$router.resolve({
            path: "/index",
          });
          window.open(routeUrl.href, "_self");
        } 
      })
    }
  }
}
</script>
 
<style scoped>


.login-box{
  width: 400px;
  height: 450px;
  border-radius: 17px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
}

.logo{
  font-size: 30px;
  margin-top: 50px;
}

.logo span{
  color: rgba(138,198,209,1);
}

.form-box{
  margin-top: 65px;
  width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.form-box >>> .all-input{
  width: 100%;
  height: 30px;
  background-color: #fff;
  margin: 15px 0;
  border-radius: 17px;
}

.form-box >>> .all-input input{
  border-radius: 17px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.form-box >>> .all-input input:hover{
  border: 1px solid rgba(138,198,209,1);
}

.form-box >>> .check-box{
  width: 100%;
  margin: 15px 0;
}

.form-box >>> .login-btn{
  width: 100%;
  border: none;
  background-color: rgba(138,198,209,1);
  color: #fff;
  border-radius: 10px;
}
</style>